<template>
	<view>
		<cu-custom bgColor="bg-red" :isBack="true">		<block slot="backText"></block>
			<block slot="content">{{title}}</block>
		</cu-custom>
		
		<view class="whole-box">
			<view class="table-box" v-for="(item,index) in list" :key="index">
				<view class="goods">
					<image :src="item.product_picture"></image>
					<view class="info">
						<text class="name">{{item.product_name}}</text>
						<text class="spec">数量：{{item.num}}</text>
						<text class="spec" v-if="item.sku_name != ''">规格：{{item.sku_name}}</text>
					</view>
				</view>
				<!-- <view v-if="item/2==0" class="reply-box">
					<view class="note">追加评论</view>
					<view class="reply">干净做酒，明白做人一直是我们的宗旨，您的满意，是我们前进的动力，我们将再接再厉，争取更大</view>
				</view> -->
				<view v-if="item.is_evaluate == 0" class="re-btn" @tap="goPage('/pages/shop/evaluate/create?orderid='+item.order_id + '&orderproid='+item.id )">我要评价</view>
				<view v-if="item.is_evaluate == 1" class="re-btn" @tap="showModel(index)">我要追评</view>
				<view v-if="item.is_evaluate == 2" class="re-btn" style="background-color: #000000;" @tap="goPage('/pages/shop/evaluate/create?orderid='+item.order_id + '&orderproid='+item.id )">
					查看评价
					</view>
			</view>
		</view>
		
		<view class="cu-modal" :class="modalName=='ReturnModal'?'show':''" @tap="modalName=''">
			<view class="cu-dialog" @tap.stop="">
				<view class="cu-bar bg-white justify-end">
					<view class="content">我要追评</view>
					<view class="action" @tap="modalName=''">
						<text class="cuIcon-close "></text>
					</view>
				</view>
				<view class="bg-white padding-lr">
					<view class="cu-bar">
						追评内容
					</view>
					<view class="cu-form-group bg-gray radius padding-xs">
						<textarea maxlength="50" placeholder="请输入内容" v-model="content" class="text-left   "></textarea>
					</view>
					<view class="cu-btn margin-top margin-bottom" :class="'bg-'+theme" @tap="reCreate(cur)">确定</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				theme: this.$config.THEME(),
				title: '我的评价',
				modalName: '',
				content: '',
				loading: false,
				list:null, //订单的产品列表，逐一追评
				cur: 0,
				type:'evaluate',
				orderid:0,
				orderproid:0,
				detail:null,
			};
		},
		onLoad(options) {
			if (options.orderid > 0) {
				this.orderid = options.orderid
			}
			
			if (options.type) {
				this.type = options.type
				if (this.type == 'review') {
					this.title = '我要追评'
				}
			}
			this.getDetail();
		},
		onShow() {
			
		},
		methods: {
			getDetail(){
				
				this.$http
					.post('evaluate_list', {
						orderid: this.orderid,
					})
					.then((response) => {
						console.log(response.data.data)
						this.list = response.data.data
						uni.hideLoading()
					})
					.catch((response) => {
						console.log(response)
						uni.hideLoading()
						this.loading = false;
				})
			},
			showModel(index){
				console.log(index)
				this.content = ''
				this.modalName = 'ReturnModal'
				this.cur = index
			},
			
			reCreate(index) {
				console.log(this.list[index].id);
				if (this.loading) return
				this.loading = true
				uni.showLoading({
					title: '处理中...'
				})
				this.$http
					.post('evaluate_re_create', { //追评接口
						order_product_id: this.list[index].id,
						again_content: this.content,
					})
					.then((response) => {
						//追评完赋值
						this.list[index].status = 0 
						this.list[index].content = this.content
						
						this.getDetail();

						this.loading = false
						uni.hideLoading()
						this.$common.showSuccess('追评成功')
						this.modalName = ''
					})
					.catch((response) => {
						this.loading = false
						uni.hideLoading()
					})
			},
		}
	}
</script>

<style>
	.table-box{
		margin: 20rpx 20rpx 0;
		background-color: #FFFFFF;
		padding: 32rpx 18rpx;
		border-radius: 16rpx;
		height: 230rpx;
	}
	.table-box .goods{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.table-box .goods image{
		width: 102rpx;
		height: 102rpx;
		margin-right: 18rpx;
		border-radius: 6rpx;
		flex-shrink: 0;
	}
	.table-box .goods .info{
		flex: 1;
		height: 102rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}
	.table-box .goods .info .name{
		font-size: 28rpx;
		font-weight: bold;
		color: #333333;
	}
	.table-box .goods .info .spec{
		font-size: 26rpx;
		color: #999999;
	}
	
	.table-box .star-line{
		margin-top: 40rpx;
		display: flex;
		align-items: center ;
	}
	.star-line text{
		font-size: 26rpx;
		color: #999999;
	}
	.star-line text.bold{
		font-size: 30rpx;
		color: #333333;
	}
	.star-line .star{
		width: 300rpx;
		margin: 0 40rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.star-line .star image{
		width: 42rpx;
		height: 40rpx;
	}
	
		
	.re-btn{
		margin-top: 10px;
		    /* text-align: right; */
		    font-size: 15px;
		    /* color: #333333; */
		    width: 100px;
		    height: 30px;
		    background: #f22a4f;
		    text-align: center;
		    line-height: 30px;
		    border-radius: 20px;
		    color: #fff;
		    float: right;
	}
	
	.reply-box .note{
		font-size: 28rpx;
		color: #333333;
		font-weight: bold;
	}
	.reply-box .reply{
		margin-top: 16rpx;
		font-size: 26rpx;
		color: #666666;
		line-height: 36rpx;
	}
	.reply-box .reply text{
		color: #333333;
		font-weight: bold;
	}
	
	.text-content{
		width: 100%;
		height: 130rpx;
		margin-top: 40rpx;
		line-height: 36rpx;
	}
	.text-content textarea{
		width: 100%;
		height: 100%;
	}
	.text-placeholder{
		font-size: 26rpx;
		color: #B9B8B8;
	}
	
	.submit-btn{
		margin: 40rpx auto 10rpx;
		width: 70%;
		text-align: center;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 40rpx;
		font-size: 30rpx;
	}
</style>
